<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>极简树洞</title>
    <!--我的主题颜色: #F2C269-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="root">
    <!--导航栏-->
    <div id="headBar">
        <img src="https://img-blog.csdnimg.cn/9f695df1d5404305a158451fadfcd4c7.png" alt="" class="logo">
        <el-menu
                default-active="frontPage"
                class="el-menu"
                mode="horizontal"
                @select="handleSelect"
                background-color="#F2C269"
                text-color="#000"
                active-text-color="#fff"
        >
            <el-menu-item index="frontPage">树洞首页</el-menu-item>
            <el-menu-item v-if="visitor === true" index="loginInAndRegister">登录/注册</el-menu-item>
            <el-submenu v-if="visitor !== true" index="2">
                <template slot="title">{{user.name}}</template>
                <el-menu-item v-if="visitor !== true" index="personalInfo">个人信息</el-menu-item>
                <el-menu-item v-if="visitor !== true" index="personalPub">我发布的</el-menu-item>
            </el-submenu>
            <el-menu-item v-if="visitor !== true" index="history">浏览历史</el-menu-item>
            <el-menu-item index="about">关于</el-menu-item>
        </el-menu>
    </div>

    <!--树洞首页-->
    <div id="frontPage">
        <!--排序选项条-->
        <div id=sortBar>
            <el-radio-group class="sortBar"
                            v-model="sortBy"
                            @change="sortChange"
            >
                <el-radio-button label="0">最新</el-radio-button>
                <el-radio-button label="1">最热(今天)</el-radio-button>
                <el-radio-button label="2">最热(本周)</el-radio-button>
                <el-radio-button label="3">随便看看</el-radio-button>
            </el-radio-group>

            <el-button
                    type="primary"
                    plain
                    @click="handleInputButton"
            >
                新树洞
            </el-button>
        </div>

        <!--todo 试着使用无限滚动优化体验-->

        <!--文章主体-->
        <div id=articles>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="card-header">
                    <div class="font-title">
                        {{article.title}}
                    </div>
                    <div class="font-detail">
                        {{article.nickName}}@{{article.insertTime.replace("T", " ")}}&nbsp;&nbsp;&nbsp;&nbsp;来自{{article.geoIp}}
                    </div>
                </div>
                <div class="card-text">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{article.text}}
                </div>
                <div class="card-likeAndDislike">
                    <!--单选后请求新树洞-->
                    <el-radio-group
                            v-model="article.likeOrDislike"
                            @change="likeChange"
                            fill="#F2C269"
                            id="likeChoose"
                            :disabled="article.tagged"
                    >
                        <el-radio-button id="likeRadio" label="like">
                            抱抱&nbsp;&nbsp;{{article.likeCount}}
                        </el-radio-button>
                        <el-radio-button id="dislikeRadio" label="dislike">
                            Emm&nbsp;&nbsp;{{article.dislikeCount}}
                        </el-radio-button>
                    </el-radio-group>
                </div>
            </el-card>
            <div style="text-align: center;">
            </div>
        </div>

        <!--空白文章临时占位-->
        <div id=emptyArticle style="display: none">
            <el-card class="box-card" shadow="hover">
                <div class="font-title">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;没有更多内容啦~
                </div>
            </el-card>

        </div>

    </div>

    <!--新树洞的弹窗-->
    <el-drawer
            direction="btt"
            :visible.sync="inputSection"
            :before-close="handleInputClose"
            size="50%"
    >
        <el-card shadow="hover">
            <div slot="header" class="card-header">
                <div class="font-title">
                    新树洞
                </div>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px">
                <el-form-item prop="title">
                    <el-input v-model="ruleForm.title" placeholder="标题" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item prop="nickName">
                    <el-input v-model="ruleForm.nickName" placeholder="署名" maxlength="10"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item prop="text">
                    <el-input type="textarea" v-model="ruleForm.text" placeholder="正文" maxlength="300"
                              autosize
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button-group class="form-button" style="float: right">
                        <el-button type="primary" @click="submitForm('ruleForm')">&nbsp;&nbsp;发布&nbsp;&nbsp;
                        </el-button>
                        <el-button @click="resetForm('ruleForm')">&nbsp;&nbsp;清空&nbsp;&nbsp;</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </el-card>
    </el-drawer>

    <!--登入与注册-->
    <div id="loginInAndRegister" style="display: none">
        <!--登陆模块-->
        <div id="loginBlock">
            <el-card class="box-card" shadow="hover">
                <el-form :model="loginForm"
                         :rules="rules"
                         ref="ruleForm"
                         label-width="80px"
                         label-position="left"
                >
                    <el-form-item prop="phoneNumber" label="手机号">
                        <el-input v-model="loginForm.phoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="loginForm.password" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')"
                                   style="float: right; padding-bottom: 10px">&nbsp;&nbsp;登陆&nbsp;&nbsp;
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-link :underline="false" style="float: right; padding-bottom: 20px" @click="newUser">我是新用户&nbsp;&nbsp;</el-link>
            </el-card>
        </div>

        <!--注册模块-->
        <div id="registerBlock" style="display: none;">
            <el-card class="box-card" shadow="hover">
                <el-form :model="registerForm"
                         :rules="rules"
                         ref="ruleForm"
                         label-width="80px"
                         label-position="left"
                >
                    <el-form-item prop="phoneNumber" label="手机号">
                        <el-input v-model="registerForm.phoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="registerForm.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('registerForm')"
                                   style="float: right; padding-bottom: 10px">
                            &nbsp;&nbsp;注册&nbsp;&nbsp;
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-link :underline="false" style="float: right; padding-bottom: 20px" @click="backLogin">
                    返回登录&nbsp;&nbsp;&nbsp;&nbsp;
                </el-link>
            </el-card>
        </div>
    </div>

    <!--关于-->
    <div id="about" style="display: none">
        <el-card class="box-card" style="text-align: center;">
            <el-descriptions title="哎呀你竟然找到了这里!(还不是你这个破网页只有这几个标签)" border>
                <el-descriptions-item label="Author">sAndman</el-descriptions-item>
                <el-descriptions-item label="CSDN">
                    <a href="https://blog.csdn.net/weixin_42376016">我的CSDN博客</a>
                </el-descriptions-item>
                <el-descriptions-item label="Gitee">
                    <a href="https://gitee.com/fanjiachengper/treehole">本项目源码地址</a>
                </el-descriptions-item>
                <el-descriptions-item label="Email">fanjiachengper@163.com</el-descriptions-item>
                <el-descriptions-item label="ToU">感谢访问!!</el-descriptions-item>
            </el-descriptions>
            <img src="https://img-blog.csdnimg.cn/0a2c09c60382442f831be8638c979b0d.jpeg" alt="" class="easterEgg">
        </el-card>
    </div>
</div>

<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/element/index.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--<script type="text/javascript" src="js/axios/axios.min.js"></script>-->
</body>
</html>